<template>
  <BottomDrawer :visible="addVisible" class="projectFeeForm" :title="dataType.dataType === 0 ? '新增' : '编辑'" :width="553"
    @close="addVisible = false">
    <div style="padding: 0px;" v-if="addVisible">
      
      <PageForm ref="pageForm" :gutter="'0'"  :list="list" :labelPosition="'left'" :form-data="formData" :rules="rules">
        <template #projectType>
          <el-select v-model="formData.projectType" class="m-2" filterable :placeholder="projectCategoryText+'类型'" style="width: 403px">
            <el-option v-for="item in option1" :key="item.itemCode" :label="item.itemName" :value="item.itemCode" />
          </el-select>
        </template>
        <template #sampleType v-if="dataType.projectCategory == '2'">
          <el-select v-model="formData.sampleType" class="m-2" filterable placeholder="样本类型" style="width: 403px">
            <el-option v-for="item in option2" :key="item.value" :label="item.text" :value="item.value" />
          </el-select>
        </template>
        <template #deptId>
          <el-select v-model="formData.deptId" class="m-2" filterable placeholder="执行科室" style="width: 403px">
            <el-option v-for="item in option3" :key="item.deptId" :label="item.deptName" :value="item.deptId" />
          </el-select>
        </template>

        <template #unit>
          <el-select v-model="formData.unit" class="m-2" filterable placeholder="单位" style="width: 403px">
            <el-option v-for="item in option5" :key="item.unitCode" :label="item.unitText" :value="item.unitCode" />
          </el-select>
        </template>


        <template #chargeType v-if="dataType.projectCategory == '3'">
          <el-select v-model="formData.chargeType" filterable class="m-2" placeholder="收费方式" style="width: 403px">
            <el-option v-for="item in option4" :key="item.value" :label="item.text" :value="item.value" />
          </el-select>
        </template>
      </PageForm>

    </div>

    <template #footer>
      <el-button @click="handleSubmit" :loading="loadingBtn" type="primary">确 定</el-button>
      <el-button @click="addVisible = false">取 消</el-button>
    </template>
  </BottomDrawer>
</template>

<script setup lang="ts">
import type { RoleForm, RoleQuery } from '@/types/role';
import type { FormRules, ElTree } from 'element-plus';
// import { addShift ,updateShift} from '@/api/register/index';
import { getProjectFeeList, addProjectFee, updateProjectFee, deleteProjectFee, enableProjectFee, disableProjectFee } from '@/api/projectFee';
import stores from '@/store';
import { deptGetSelectList } from '@/api/account'

import type { ProjectFeeForm, ProjectFeeInfo, ProjectFeeTable } from '@/types/projectFee/index'

let rules = reactive<FormRules<ProjectFeeInfo>>({
  projectType: [
    { required: true, message: '请选择项目类型', trigger: 'change' },
  ],
  projectName: [
    { required: true, message: '请输入项目名', trigger: 'blur' },
  ],

  deptId: [
    { required: true, message: '请选择科室', trigger: 'change' },
  ],
  price: [
    { required: true, message: '请输入销售价格', trigger: 'blur' },
  ],
  unit: [
    { required: true, message: '请输入单位', trigger: 'blur' },
  ],
  sortNum: [
    { required: true, message: '请输入排序号', trigger: 'blur' },
  ],
});

const loadingBtn = ref<boolean>(false)

// 获取序列列表
const pageForm = ref();
const dataType = defineProps<{ dataType: Number, projectCategory: string }>();
const projectCategoryText = computed(() => {
  if (dataType.projectCategory == '1') {
    return '检查'
  }
  if (dataType.projectCategory == '2') {
    return '检验'
  }
  if (dataType.projectCategory == '3') {
    return '外治'
  }
  return ''
})
const filterText = ref('');
const treeRef = ref<InstanceType<typeof ElTree>>();
watch(filterText, (val) => {
  treeRef.value!.filter(val);
});
const formData = ref<ProjectFeeInfo>({
  projectCategory: dataType.projectCategory,
  projectType: '',
  projectName: '',
  sampleType: '',
  deptId: '',
  price: '',
  unit: '',
  sortNum: '',

});
const option1 = ref<any>([])
const option2 = ref<any>([])
const option3 = ref<any>([])
const option4 = ref<any>([])
const option5 = ref<any>([])
const getDeptGetSelectList = async () => {
  let res = await deptGetSelectList()
  if(res.code != '200'){
    //ElMessage.error(res.msg);
    return
  }
  option3.value = res.data
}
let list: any = computed(() => [
  {
    list: [
      {
        span: 24,
        label: projectCategoryText.value + '类型',
        prop: 'projectType',
        componentProps: {
          width: '340px',
          slotName: 'projectType',
          placeholder: '项目类型'
        },
        labelWidth: '100px',
        component: 'slotName',
      },
      {
        span: 24,
        component: 'input',
        prop: 'projectName',
        labelWidth: '100px',
        componentProps: {
          placeholder: '项目名',
          width: '403px',
        },
        label: '项目名',
      },
      {
        span: 24,
        label: '科室',
        prop: 'deptId',
        componentProps: {
          width: '340px',
          slotName: 'deptId',
          placeholder: '科室'
        },
        labelWidth: '100px',
        component: 'slotName',
      },
      {
        span: 24,
        component: 'input',
        prop: 'price',
        labelWidth: '100px',
        componentProps: {
          placeholder: '销售价格',
          width: '366px',
          rightText: '元'
        },
        label: '销售价格',
      },
      {
        span: 24,
        label: '单位',
        prop: 'unit',
        componentProps: {
          slotName: 'unit',
          placeholder: '单位'
        },
        labelWidth: '100px',
        component: 'slotName',
      }, {
        span: 24,
        component: 'input',
        labelWidth: '100px',
        prop: 'sortNum',
        componentProps: {
          width: '403px',
          placeholder: '排序号'
        },
        label: '排序号',
      },
    ],
  },
]);
const optionFun = () => {
  let unitList: any = []
  for (let index = 0; index < stores.useBaseDataStore().getDictsSelect('UNIT').length; index++) {
    let item = stores.useBaseDataStore().getDictsSelect('UNIT')[index];
    if (item.unitType == '2') {
      unitList.push(item)
    }
  }
  option5.value = unitList

  if (dataType.projectCategory == '1') {
    option1.value = stores.useBaseDataStore().getDictsSelect('EXAM_TYPE')
    //console.log(option1, 'option1');

  }
  if (dataType.projectCategory == '2') {
    option1.value = stores.useBaseDataStore().getDictsSelect('LAB_TYPE')
    option2.value = stores.useBaseDataStore().getEnumSelect('labSampleTypeEnum')

    rules = reactive<FormRules<ProjectFeeInfo>>({
      projectType: [
        { required: true, message: '请选择项目类型', trigger: 'change' },
      ],
      projectName: [
        { required: true, message: '请输入项目名', trigger: 'blur' },
      ],

      deptId: [
        { required: true, message: '请选择科室', trigger: 'change' },
      ],
      price: [
        { required: true, message: '请输入价格', trigger: 'blur' },
      ],
      unit: [
        { required: true, message: '请输入单位', trigger: 'blur' },
      ],
      sampleType: [
        { required: true, message: '请选择样本类型', trigger: 'change' },
      ],
    });

    list = computed(() => [
      {
        list: [
          {
            span: 24,
            label: projectCategoryText.value + '类型',
            prop: 'projectType',
            componentProps: {
              width: '340px',
              slotName: 'projectType',
              placeholder: projectCategoryText.value + '类型'
            },
            labelWidth: '100px',
            component: 'slotName',
          },
          {
            span: 24,
            component: 'input',
            prop: 'projectName',
            labelWidth: '100px',
            componentProps: {
              placeholder: '项目名',
              width: '403px',
            },
            label: '项目名',
          },
          {
            span: 24,
            label: '样本类型',
            prop: 'sampleType',
            componentProps: {
              width: '340px',
              slotName: 'sampleType',
              placeholder: '样本类型'
            },
            labelWidth: '100px',
            component: 'slotName',
          },
          {
            span: 24,
            label: '科室',
            prop: 'deptId',
            componentProps: {
              width: '340px',
              slotName: 'deptId',
              placeholder: '科室'
            },
            labelWidth: '100px',
            component: 'slotName',
          },
          {
            span: 24,
            component: 'input',
            prop: 'price',
            labelWidth: '100px',
            componentProps: {
              placeholder: '价格',
              width: '366px',
              rightText: '元'
            },
            label: '价格',
          },
          {
            span: 24,
            label: '单位',
            prop: 'unit',
            componentProps: {
              width: '340px',
              slotName: 'unit',
              placeholder: '单位'
            },
            labelWidth: '100px',
            component: 'slotName',
          }, {
            span: 24,
            component: 'input',
            labelWidth: '100px',
            prop: 'sortNum',
            componentProps: {
              width: '403px',
              placeholder: '排序号'
            },
            label: '排序号',
          },
        ],
      },
    ]
    );
    formData.value.sampleType ? formData.value.sampleType : formData.value.sampleType = ''
  }
  if (dataType.projectCategory == '3') {
    formData.value.chargeType ? formData.value.chargeType : formData.value.chargeType = ''
    option1.value = stores.useBaseDataStore().getDictsSelect('EXT_TYPE')
    option4.value = stores.useBaseDataStore().getEnumSelect('projectChargeTypeEnum')

    list = computed(() => [
      {
        list: [
          {
            span: 24,
            label: projectCategoryText.value + '类型',

            prop: 'projectType',
            componentProps: {
              
              slotName: 'projectType',
              placeholder: '项目类型'
            },
            labelWidth: '100px',
            component: 'slotName',
          },
          {
            span: 24,
            component: 'input',
            prop: 'projectName',
            labelWidth: '100px',
            componentProps: {
              placeholder: '项目名',
              width: '403px',
            },
            label: '项目名',
          },
          {
            span: 24,
            label: '科室',
            prop: 'deptId',
            componentProps: {
              
              slotName: 'deptId',
              placeholder: '科室'
            },
            labelWidth: '100px',
            component: 'slotName',
          },
          {
            span: 24,
            component: 'input',
            prop: 'price',
            labelWidth: '100px',
            componentProps: {
              placeholder: '价格',
                width: '366px',
              rightText: '元'
            },
            label: '价格',
          },
          // {
          //   span: 24,
          //   label: '单位',
          //   prop: 'unit',
          //   componentProps: {
               
          //     slotName: 'unit',
          //     placeholder: '单位'
          //   },
          //   labelWidth: '100px',
          //   component: 'slotName',
          // },
          {
            span: 24,
            label: '收费方式',
            prop: 'chargeType',
            componentProps: {
               
              slotName: 'chargeType',
              placeholder: '收费方式'
            },
            labelWidth: '100px',
            component: 'slotName',
          }, {
            span: 24,
            component: 'input',
            labelWidth: '100px',
            prop: 'sortNum',
            componentProps: {
              width: '403px',
              placeholder: '排序号'
            },
            label: '排序号',
          },


        ],
      },
    ]);
    rules = reactive<FormRules<ProjectFeeInfo>>({
      projectType: [
        { required: true, message: '请选择类型', trigger: 'change' },
      ],
      projectName: [
        { required: true, message: '请输入项目名', trigger: 'blur' },
      ],

      deptId: [
        { required: true, message: '请选择科室', trigger: 'change' },
      ],
      price: [
        { required: true, message: '请输入销售价格', trigger: 'blur' },
      ],
      // unit: [
      //   { required: true, message: '请输入单位', trigger: 'blur' },
      // ],
      chargeType: [
        { required: true, message: '请选择收费方式', trigger: 'change' },
      ],
    });
  }

}


defineExpose<{
  open: () => void;
  open1: (menu: ProjectFeeInfo) => void;
}>({
  open: () => {
    formData.value = {
      projectCategory: dataType.projectCategory,
      projectType: '',
      projectName: '',
      deptId: '',
      price: '',
      unit: '',
      sortNum: ''
    }
    getDeptGetSelectList()
    optionFun()

    addVisible.value = true;

  },
  open1: (menu: ProjectFeeInfo) => {
    // formData.value = menu

    formData.value = {
      projectCategory: dataType.projectCategory,
      projectType: menu.projectType,
      projectName: menu.projectName,
      deptId: menu.deptId,
      price: menu.price,
      unit: menu.unit,
      chargeType: menu.chargeType,
      sampleType: menu.sampleType,
      projectId: menu.projectId,
      sortNum: menu.sortNum
    }


    getDeptGetSelectList()
    optionFun()

    addVisible.value = true;

  },
});

const addVisible = ref(false);


const userList = ref<any>()




const addChannelApi = async () => {
  loadingBtn.value = true
  let data = {...formData.value}
  data.price = Number( (data.price * 100).toFixed(0))
  let res = await addProjectFee(data)
  loadingBtn.value = false

  if (res.code == '200') {
    ElMessage({
      type: 'success',
      message: '保存成功'
    });
    closeDrawer()
  } else {
    
  }

};
const editChannelApi = async () => {
  loadingBtn.value = true
  let data = {...formData.value}
  data.price = Number( (data.price * 100).toFixed(0))
  let res = await updateProjectFee(data)
  loadingBtn.value = false

  if (res.code == '200') {
    ElMessage({
      type: 'success',
      message: '保存成功'
    });
    closeDrawer()
  } else {
  
  }

};
const handleSubmit = async () => {
  const ruleFormRef = pageForm.value?.ruleFormRef;
  await ruleFormRef.validate((valid: any, fields: any) => {
    if (valid) {
      if (dataType.dataType === 0) {
        addChannelApi();
      } else {
        editChannelApi();
      }
    } else {
      //console.log('error submit!', fields);
    }
  });
};
const emit = defineEmits(['closeDrawer']);
const closeDrawer = () => {
  addVisible.value = false
  emit('closeDrawer');
};

</script>
<style lang="scss" >
  .projectFeeForm .modal-footer{
    padding: 10px 0px;
  }

</style>

<style lang="scss" scoped>
.tree-box {
  border: 2px solid #e1e1e1;
  height: 300px;
  width: 451px;
  margin-top: 10px;
  overflow-y: auto;
}
</style>
